If you have any questions that are beyond the scope of this documentation, please feel free to email or contact us via my page.
Uplon is a fully responsive premium web UI kit built with awesome bootstrap v4.3.1. It comes with super clean user interfaces, many ready to use and highly customizable components and widgets. The power of SASS and easy code allows any developer to turn this theme into real web application. By the way, I have added basic version of PHP to get started with it if you are using PHP based framework.
We really care for our buyers and so in case if you have any question or feedback, please feel free to get back to us.
I have tried to follow the standards and modular structure while developing the theme. Following sections are explaining the theme File & Folder, structure, html file struture and plugins.
├── html files Src/assets/ ├── scss/ │ └── All SCSS files ├── css/ │ └── All css files. ├── fonts/ ├── pages/ │ └── All the pages related scripts ├── images/ │ └── All images ├── plugins/ │ └── The plugins files - which are not available through bower └── js/ └── All common Javascripts files
Sass is the most mature, stable, and powerful professional grade CSS extension language in the world.
All the css files are pre-compiled using compass compiler and provided inside the assets/css/
folder. In case if you are not familiar with sass/scss or
don't have any environment setup which can be used to compile these files, you can use these CSS files directly.
But if you are familiar with saas, I'll suggest you to use the scss files.
Note that you will need to install compass, nodejs, npm, gulp etc in order to compile the scss file. I am sure you know this ;)
Files are explained below:
File | Description |
---|---|
bootstrap
|
Uplon uses the bootstrap v4.3.1 The main style.sccs already imports the customized bootstrap styles.
|
style.sccs /style.css
|
This is main style file. The scss version is importing all the custom scss files. Each of the scss file is containing style for speicic element. E.g Buttons, checkbox, icons, forms, etc. |
_variable.scss
|
This file is containing all the constants values. This allows you to easily customize may things including colors, fonts, text sizes, etc. |
_pages.scss
|
Pages contains the styles for all supported third-party JS/CSS plugins. It has overwritten version of styles. |
_components.scss
|
This is the one of the core and important file. It contains the styles for all the components, ui elements, and some other parts of the theme. |
_forms.scss
|
The form's related styles are available into this file. You can easily change the styles for some of form elements. |
_icons.scss
|
Combines various font icons. You should remove the fonts you don't plan to use from this file and recompile it. |
_common.scss
|
Common contains some common styles used in various pages. |
_buttons.scss
|
Button styles are available here. |
_charts.scss
|
All the chart related styles are present into this file. |
_checkbox-radio.scss
|
Custom checkboxes and radio button styles are available in this file. |
_helper.scss
|
Some of the helper classes are available in this file. |
_menu.scss
|
This includes the style for topbar, left side bar and right sidebar. |
_modal.scss
|
Contains the style for modals. |
_notifications.scss
|
Notifications related styles are available in this file. |
_progress.scss
|
Progress bar related styles are available in this file. |
_sweetalert.scss
|
Sweet alert related custom styles are available in this file. |
_tables.scss
|
All the tables related styles are available in this file. |
_tour.scss
|
Product tour related styles are available in this file. |
_treeview.scss
|
Tree view widgets styles are available here. |
_typography.scss
|
Typography are available in this file. |
_widgets.scss
|
Contains the widgets related styles. |
Uplon uses jQuery, Bootstrap JS framework(at its core) and some of the third-party plugins. There are may more third party plugin which you can use according to your needs. The css is already containing matching style for these plugins so you will not need to do anything around it.
Files are explained below:
File | Description |
---|---|
jquery.js , bootstrap.js ,
jquery.nicescroll , jquery.slimscroll , etc.
|
These files are used at core of the theme. |
jquery.app.js
|
This is a main js file. It contains the custom JS code needed for features including layout, sidebar, etc. |
jquery.core.js
|
This file contains the definition of some of the key components (e.g. notifications, portlet, etc) and code (for self-initialization) related to some of the controls (e.g. modal, range-slider, switchery, multiselect, etc) |
pages/*.js
|
These are the files containing pages specific code. They are mainly used for demo purpose. |
plugins/**.js
|
All supported and integrated third-party plugins are included in here. |
Page | Plugin CSS | Plugin js | Custom js |
---|---|---|---|
ui-modal.html | custombox.min.css | custombox.min.js , legacy.min.js | - |
ui-notification.html | toastr.min.css | toastr.min.js | - |
components-range-sliders.html | ion.rangeSlider.css , ion.rangeSlider.skinFlat.css | ion.rangeSlider.min.js | jquery.ui-sliders.js |
components-sweet-alert.html | sweet-alert.css | sweet-alert.min.js | jquery.sweet-alert.init.js |
components-ratings.html | hopscotch.min.css | hopscotch.min.js | - |
components-treeview.html | - | jquery.raty-fa.js | jquery.rating.js |
components-tour.html | hopscotch.min.css | hopscotch.min.js | - |
calendar.html | fullcalendar.css | jquery-ui.min.js, moment.js, fullcalendar.min.js | jquery.fullcalendar.js |
form-advanced.html | bootstrap-tagsinput.css, multi-select.css, select2.min.css | jquery.multi-select.js, bootstrap-tagsinput.js, jquery.quicksearch.js, select2.full.min.js, bootstrap-maxlength.min.js autocomplete/jquery.mockjax.js, autocomplete/countries.js, jquery.autocomplete.min.js | jquery.autocomplete.init.js, jquery.formadvanced.init.js |
form-validation.html | - | parsley.min.js | - |
form-pickers.html | bootstrap-timepicker.min.css,bootstrap-colorpicker.min.css,bootstrap-datepicker.min.css,bootstrap-clockpicker.min.css,bootstrap-daterangepicker/daterangepicker.css | bootstrap-timepicker.min.js,bootstrap-colorpicker.min.js,bootstrap-datepicker.min.js,bootstrap-clockpicker.js,daterangepicker.js | jquery.form-pickers.init.js |
form-wizard.html | jquery.steps.css | jquery.validate.min.js,jquery.steps.min.js | jquery.wizard-init.js |
form-mask.html | - | bootstrap-inputmask.min.js, autoNumeric.js | - |
form-uploads.html | jquery.filer.css, jquery.filer-dragdropbox-theme.css | jquery.filer.min.js | jquery.fileuploads.init.js |
form-xeditable.html | bootstrap-editable.css | bootstrap-editable.min.js | jquery.xeditable.js |
tables-datatable.html | dataTables.bootstrap4.min.css, buttons.bootstrap4.min.css, responsive.bootstrap4.min.css | datatables/jquery.dataTables.min.js, dataTables.bootstrap4.min.js, dataTables.buttons.min.js, buttons.bootstrap4.min.js, jszip.min.js, pdfmake.min.js, vfs_fonts.js, buttons.html5.min.js, buttons.print.min.js, buttons.colVis.min.js, dataTables.responsive.min.js, responsive.bootstrap4.min.js | - |
tables-responsive.html | rwd-table.min.css | rwd-table.min.js | - |
tables-tablesaw.html | tablesaw.css | tablesaw.js, tablesaw-init.js | - |
chart-flot.html | - | jquery.flot.js , jquery.flot.time.js , jquery.flot.tooltip.min.js , jquery.flot.resize.js , jquery.flot.pie.js , jquery.flot.selection.js , jquery.flot.stack.js , jquery.flot.orderBars.min.js , jquery.flot.crosshair.js | jquery.flot.init.js |
chart-morris.html | morris.css | morris.min.js , raphael-min.js | morris.init.js |
chart-chartjs.html | - | chart.min.js | chartjs.init.js |
chart-peity.html | - | jquery.peity.min.js | - |
chart-chartist.html | chartist.min.css | chartist.min.js | jquery.chartist.init.js |
chart-c3.html | c3.min.css | d3.min.js, c3.min.js, | jquery.c3-chart.init.js |
chart-sparkline.html | - | jquery.sparkline.min.js | jquery.charts-sparkline.js |
chart-knob.html | - | jquery.knob.js | - |
The theme contains various utilies including some helper classes, widgets, etc. Please see below some helper classes.
Helper Classes:
Class | Description |
---|---|
.p-0 | Removes all padding space |
.p-20 | Adds 20px padding |
.m-0 | Remove all margin |
.m-r-5 | Adds 5px right margin |
.m-t-10 | Adds 10px top margin |
.m-t-20 | Adds 20px top margin |
.m-t-30 | Adds 30px top margin |
.m-t-50 | Adds 50px top margin |
.m-b-10 | Adds 10px bottom margin |
.m-b-15 | Adds 15px bottom margin |
.m-b-20 | Adds 20px bottom margin |
.m-b-30 | Adds 30px bottom margin |
.w-xs | Minimum width 80px |
.w-sm | Minimum width 95px |
.w-md | Minimum width 110px |
.w-lg | Minimum width 140px |
.font-13 | font size 13px |
We've used the following resources as listed. These are some awesome creation and we are thankful to the community.
Once again thank you for your purchase. I'll be happy to answer the the questions you have related to the theme. In case if you have any suggestion or feature, request please feel free to contact me, I'll try to implement it and will release as part of future updates.
Stay Awesome!
- Coderthemes
Version 1.9.0 19 March 2019
Version 1.8.0 01 Nov 2018
Version 1.7.0 20 Apr 2018
Version 1.6.0 04 September 2017
Version 1.5.0 27 April 2017
Version 1.4.0 23 Sep 2016
Version 1.3.0 31 Aug 2016
Version 1.2.0 10 Aug 2016
Version 1.1.0 07 July 2016
Version 1.0.0 10 Jun 2016
Copyright © 2016 Coderthemes.